<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<link rel="stylesheet" type="text/css" href="../css/reset.css">
	<link rel="stylesheet" type="text/css" href="../css/common-list.css">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
</head>
<body>
	<header>
		<div class="header-con">
			<a class="navbar-header" href="">
				<img src="../images/logo.png" alt="">
			</a>
			<ul>
				<li>
					<a href="">首页</a>
				</li>
				<li>
					<a href="">人资管理</a>
				</li>
				<li>
					<a href="">指标设置</a>
				</li>
				<li>
					<a href="">数据统计</a>
				</li>
				<li>
					<a href="">工作时设置</a>
				</li>
				<li>
					<a href="">财务管理</a>
				</li>
			</ul>
		</div>
		<div class="peo-message">
			<div class="peo-cir">
				<!-- <img src="" alt=""> -->
			</div>
			<em>黑披士</em>
			<span class="down-list"></span>
			<!-- <ul>
				<li>123</li>
			</ul> -->
		</div>
	</header>
	<div class="boxed clearfix">
		<div class="common-tit">
			<h2>员工列表</h2>
			<span>人资管理 > 员工列表</span>
			<a class="add-staff" href="javascript:;">添加员工</a>
		</div>
		<div class="cmlist-tit clearfix">
			<div class="mar-listbox clearfix">
				<div class="multiselect-box">
					<div class="mul-downbtn">
						<em></em>
						<input type="text" placeholder="搜索">
					</div>
					<div class="multiselect-down">
						<ul>
							<li>
								<span></span>
								<strong data_id="测试1">测试1</strong>
							</li>
							<li>
								<span></span>
								<strong data_id="测试2">测试2</strong>
							</li>
							<li>
								<span></span>
								<strong data_id="测试3">测试3</strong>
							</li>
							<li>
								<span></span>
								<strong data_id="测试4">测试4</strong>
							</li>
							<li>
								<span></span>
								<strong data_id="测试5">测试5</strong>
							</li>
							<li>
								<span></span>
								<strong data_id="测试6">测试6</strong>
							</li>
							<li>
								<span></span>
								<strong data_id="测试7">测试7</strong>
							</li>
							<li>
								<span></span>
								<strong data_id="测试8">测试8</strong>
							</li>
							<li>
								<span></span>
								<strong data_id="测试9">测试9</strong>
							</li>
						</ul>
						<div class="mul-btn clearfix">
							<div class="mul-confirm">确认</div>
							<div class="mul-cancel">取消</div>
						</div>
					</div>
				</div>
				<div class="list-box">
					<div class="downbtn">
						<span data_id="all">分店名称</span>
						<em></em>
					</div>
					<ul class="dropdown-menu">
						<li data_id="all">分店名称</li>
						<li data_id="1">我们</li>
						<li data_id="2">测试测试测试测试测试</li>
						<li data_id="3">asdfasdfsaf</li>
					</ul>
				</div>
				<div class="list-box">
					<div class="downbtn">
						<span data_id="all">分店名称</span>
						<em></em>
					</div>
					<ul class="dropdown-menu">
						<li data_id="all">分店名称</li>
						<li data_id="1">我们</li>
						<li data_id="2">测试测试测试测试测试</li>
						<li data_id="3">asdfasdfsaf</li>
					</ul>
				</div>
				<div class="list-box">
					<div class="downbtn">
						<span data_id="all">分店名称</span>
						<em></em>
					</div>
					<ul class="dropdown-menu">
						<li data_id="all">分店名称</li>
						<li data_id="1">我们</li>
						<li data_id="2">测试测试测试测试测试</li>
						<li data_id="3">asdfasdfsaf</li>
					</ul>
				</div>
				<div class="list-box">
					<div class="downbtn">
						<span data_id="all">分店名称</span>
						<em></em>
					</div>
					<ul class="dropdown-menu">
						<li data_id="all">分店名称</li>
						<li data_id="1">我们</li>
						<li data_id="2">测试测试测试测试测试</li>
						<li data_id="3">asdfasdfsaf</li>
					</ul>
				</div>
				<div class="list-box l-last">
					<div class="downbtn">
						<span data_id="all">分店名称</span>
						<em></em>
					</div>
					<ul class="dropdown-menu">
						<li data_id="all">分店名称</li>
						<li data_id="1">我们</li>
						<li data_id="2">测试测试测试测试测试</li>
						<li data_id="3">asdfasdfsaf</li>
					</ul>
				</div>
			</div>
		</div>
		<div class="stlist-con">
			<div class="scrollbox">
				<table>
					<thead>
						<tr>
							<th class="sta-name">姓名</th>
							<th class="sta-sex">性别</th>
							<th class="sta-dep">部门</th>
							<th class="sta-pos">职位</th>
							<th class="sta-branch">分店</th>
							<th class="sta-state">状态</th>
							<th class="sta-operation">操作</th>
						</tr>
					</thead>
					<tbody>
						<tr>
							<td class="sta-name">张幻想<div><span></span><em>05-29</em></div></td>
							<td>男</td>
							<td>产品部</td>
							<td>导师</td>
							<td>分店一</td>
							<td>在职</td>
							<td class="sta-operation">
								<span>[</span>
								<em>查看详情</em>
								<span>]</span>	
							</td>
						</tr>
						<tr>
							<td class="sta-name">张幻想<div><span></span><em>05-29</em></div></td>
							<td>男</td>
							<td>产品部</td>
							<td>导师</td>
							<td>分店一</td>
							<td>在职</td>
							<td class="sta-operation">
								<span>[</span>
								<em>查看详情</em>
								<span>]</span>	
							</td>
						</tr>
						<tr>
							<td class="sta-name">张幻想<div><span></span><em>05-29</em></div></td>
							<td>男</td>
							<td>产品部</td>
							<td>导师</td>
							<td>分店一</td>
							<td>在职</td>
							<td class="sta-operation">
								<span>[</span>
								<em>查看详情</em>
								<span>]</span>	
							</td>
						</tr>
					</tbody>
				</table>
			</div>
		</div>
	</div>
	<script src="../js/jquery-1.12.3.js"></script>
	<script src="../js/common-list.js"></script>
	<script>
		/* 多选下拉列表 */
		$(".mul-downbtn").on("click", function() {
			if (!$(this).next().hasClass("menuopen")) {
				$(this).next().addClass("menuopen");
			}
		});
		$(".multiselect-down li").on("click", function() {
			if ($(this).hasClass("mul-select")) {
				$(this).removeClass("mul-select");
			} else {
				$(this).addClass("mul-select");
			};
		});
		$(".mul-confirm").on("click", function() {
			var arr = [];
			console.log($(this).parent().parent().find(".mul-select").children("strong").text());
			for (var i = 0; i < $(this).parent().parent().find(".mul-select").length; i++) {
				arr.push($($(this).parent().parent().find(".mul-select")[i]).children("strong").text());
			};
			$(this).parent().parent().removeClass("menuopen");
			transData();
		})
		$(".mul-cancel").on("click", function() {
			$(this).parent().parent().removeClass("menuopen");
		})
		$(".mul-downbtn input").on('input',function(e){
			if ($(this).val() != "") {
		  		console.log($(this).val());
		  		$(".multiselect-down li").addClass("mul-hide");
		  		$($(".multiselect-down li:contains(" + $(this).val() + ")")).removeClass("mul-hide");
		  	} else {
				$(".multiselect-down li").removeClass("mul-hide");
			}
		});
		$(".mar-listbox .list-box li").on("click", function() {
			$(this).parent().parent().find("span").attr("data_id", $(this).attr("data_id"));
			transData();
		})
		function transData() {
			var transD = "";
			for (var i = 0; i < $(".mar-listbox .list-box").length; i++) {
				switch(true) {
					case i == 0: transD += "分店名称1" + "=" + $($(".mar-listbox .list-box")[i]).find("span").attr("data_id") + "&";break;
					case i == 1: transD += "分店名称2" + "=" + $($(".mar-listbox .list-box")[i]).find("span").attr("data_id") + "&";break;
					case i == 2: transD += "分店名称3" + "=" + $($(".mar-listbox .list-box")[i]).find("span").attr("data_id") + "&";break;
					case i == 3: transD += "分店名称4" + "=" + $($(".mar-listbox .list-box")[i]).find("span").attr("data_id") + "&";break;
					case i == 4: transD += "分店名称5" + "=" + $($(".mar-listbox .list-box")[i]).find("span").attr("data_id");break;
				}
			};
			// studio='1,2,3,4'&department="all"&sex="all"&postion="all"&birthday="all"&status="all"
			if ($(".mar-listbox .multiselect-down").find(".mul-select").length > 0) {
				for (var i = 0; i < $(".mar-listbox .multiselect-down").find(".mul-select").length; i++) {
					if (i == 0) {
						transD += "&" + "多选" + "=" + $($(".mar-listbox .multiselect-down").find(".mul-select")[i]).children("strong").text();
					} else {
						transD += " " + $($(".mar-listbox .multiselect-down").find(".mul-select")[i]).children("strong").attr("data_id");
					}
				};
			};
			console.log(transD);
		}
	</script>
</body>
</html>